<template>
  <table class="table table-bordered table-stripped">
    <!-- 表格标题区域 -->
    <thead>
      <tr>
        <th>#</th>
        <th>商品名称</th>
        <th>价格</th>
        <th>标签</th>
        <th>操作</th>
      </tr>
    </thead>
    <!-- 表格主体区域 -->
    <tbody>
      <tr v-for="item in list" :key="item.id">
        <td>{{item.id}}</td>
        <td>{{item.goods_name}}</td>
        <td>{{item.goods_price}}</td>
        <td class="td">
          <button @click="Tag" v-if="edit">+ Tag</button>
        <input type="text" 
        v-else
        v-focus
        v-model="item.inputValue"
        @keyup.enter="close(item.id,item.inputValue)"
        >
        <span v-for="item in item.tags" :key="item">{{item}}</span>
        </td>
        <td><button @click="btn(item.id)">删除</button></td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
  props:['list'],
  name: 'MyTable',
  data(){
    return {
      edit:true,
      }
  },
  methods:{
    btn(id){
      this.$emit('click',id)
    },
    Tag(){
      this.edit = false;;
      this.tag =this.value
    },
    close(id,value){
      this.edit=false;
      console.log('触发了',id,value)
      if(!value ==''){
        this.$emit('close',id,value)
       }else{
        alert('输入数据')
       }
    }
  },
  directives:{
    focus:{
      inserted(el){
        el.focus()
      }
    }
  }
}
</script>
<style scoped lang="less">
.my-goods-list {
  .badge {
    margin-right: 5px;
  }
.span{
  margin-top: 200px;
}
}
</style>